import React, { Component } from "react";
import { Col, Radio, DatePicker } from "antd";
import styles from "./WorkingTime.less";

const { Group } = Radio;
const { RangePicker } = DatePicker;

class WorkingTime extends Component {
  render() {
    const { operate, defaultTime = [] } = this.props;
    return (
      <div>
        <Col span={8} style={{ display: "flex", justifyContent: "flex-end" }}>
          <div
            style={{
              display: "flex",
              color: "rgba(0,0,0,0.85)",
              fontSize: 14
            }}
          >
            <span className={styles.star}>*</span>计划有效期：
          </div>
        </Col>
        <Col span={16}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <Group
              style={{ width: 446 }}
              onChange={this.props.getWorkTime}
              value={this.props.workTime}
              disabled={operate === "audit" || operate === "detail"}
            >
              <Radio value={1} style={{ marginBottom: 22 }}>
                不限
              </Radio>
              <Radio value={2}>1年有效</Radio>
              <Radio value={3}>1月有效</Radio>
              <Radio value={4}>1周有效</Radio>
              <Radio value={5}>当天有效</Radio>
              <Radio value={6} style={{ marginBottom: 22 }}>
                自定义
                <RangePicker
                  style={{ width: 224, marginLeft: 8 }}
                  disabled={
                    this.props.workDis ||
                    operate === "audit" ||
                    operate === "detail"
                  }
                  showTime
                  onOk={this.props.selTime}
                  onChange={(date, dateString) =>
                    this.props.changeTime(date, dateString)
                  }
                  value={defaultTime}
                />
              </Radio>
            </Group>
            {this.props.work ? (
              <span
                style={{
                  color: "#f5222d",
                  marginBottom: 22,
                  marginTop: -12
                }}
              >
                请选择一项有效期
              </span>
            ) : null}
            {this.props.workWord ? (
              <span
                style={{
                  color: "#f5222d",
                  marginBottom: 22,
                  marginTop: -12
                }}
              >
                请填写自定义有效期
              </span>
            ) : null}
          </div>
        </Col>
      </div>
    );
  }
}

export default WorkingTime;
